// ====== Color Palette ======
// Neutral
@white: #ffffff;
@neutral-10: #f4f5f6;
@neutral-20: #e7e9ee;
@neutral-30: #d0d5dd;
@neutral-40: #afb5c0;
@neutral-50: #8d96a5;
@neutral-60: #677283;
@neutral-70: #495365;
@neutral-80: #2f3a4c;
@neutral-90: #1b222c;

// Green
@green-10: #ebf6ea;
@green-20: #bbdbb8;
@green-30: #8cca86;
@green-40: #5bb553;
@green-50: #138a07;
@green-60: #246b1e;
@green-70: #1f5919;

// Blue
@blue-10: #f1f4f9;
@blue-20: #c3d0e3;
@blue-30: #97b6e5;
@blue-40: #6597e0;
@blue-50: #3265b2;
@blue-60: #28518f;
@blue-70: #214475;

// Red
@red-10: #f9f1f1;
@red-20: #f5beba;
@red-30: #e59d9a;
@red-40: #e36d66;
@red-50: #b83a33;
@red-60: #942f2a;
@red-70: #782722;

// Yellow
@yellow-10: #fcf1e3;
@yellow-20: #fcc483;
@yellow-30: #f7a445;
@yellow-40: #de8014;
@yellow-50: #8f5514;
@yellow-60: #7a4304;
@yellow-70: #633a0b;

// ====== Commonly used variable names ======
// (all should be based on color palette above)
@gray-darker: @neutral-90;
@gray-dark: @neutral-70;
@gray: @neutral-60;
@gray-light: @neutral-40;
@gray-lighter: @neutral-30;
@gray-lightest: @neutral-10;

@blue: @blue-50;
@blue-dark: @blue-60;
@green: @green-50;
@green-dark: @green-60;
@green-darker: @green-70;
@red: @red-50;
@orange: @yellow-40;
@orange-dark: @yellow-60;

@brand-primary: @green;
@brand-secondary: @green-darker;
@brand-success: @green;
@brand-info: @blue;
@brand-warning: @orange;
@brand-danger: @red;

@accent-color-secondary: @green-darker;
@color-disabled: @neutral-20;

// == Content ==
// on light background
@content-primary-on-light-bg: @neutral-90;
@content-secondary-on-light-bg: @neutral-70;
@content-disabled-on-light-bg: @neutral-40;
@content-placeholder-on-light-bg: @neutral-50;
// on dark background
@content-primary-on-dark-bg: @white;
@content-secondary-on-dark-bg: @neutral-20;
@content-disabled-on-dark-bg: @neutral-60;
@content-placeholder-on-dark-bg: @neutral-50;
// default
@content-primary: @content-primary-on-light-bg;
@content-secondary: @content-secondary-on-light-bg;
@content-disabled: @content-disabled-on-light-bg;
@content-placeholder: @content-placeholder-on-light-bg;

// == ol-* legacy variables ==
// These will eventually be removed and replaced with above names
@ol-type-color: @content-secondary;
@ol-blue-gray-0: @neutral-10;
@ol-blue-gray-1: @neutral-20;
@ol-blue-gray-2: @neutral-40;
@ol-blue-gray-3: @neutral-60;
@ol-blue-gray-4: @neutral-70;
@ol-blue-gray-5: @neutral-80;
@ol-blue-gray-6: @neutral-90;
@ol-green: @green-50;
@ol-dark-green: @green-darker;
@ol-darker-green: @green-darker;
@ol-blue: @blue-50;
@ol-dark-blue: @blue-dark;
@ol-red: @red-50;
@ol-dark-red: @red-60;
